@import "../common/common.css";

body {
    /* writing-mode: vertical-lr; */
    flex-direction: column;
    display: flex;
    width: 1200px;
    height: fit-content;
}

body p {
    color: white;
    margin: 0px;
    margin-block: 0;
    margin-inline: 0;
}

.background img {
    height: 100%;
    width: auto;
    /* filter: blur(100px) brightness(75%); */
}

.title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 7rem;
    position: relative;
    margin-top: 2rem;
    margin-bottom: 2rem;
    top: 0;
    z-index: 2;
}

.playerInfo {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 50%;
    height: 5rem;
    position: absolute;
    left: 7%;
}

.blackBlock {
    width: 98%;
    height: 91%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    --rpoz: 28px;
    clip-path: polygon(
        100% 0%,
        calc(100% - var(--rpoz)) 100%,
        0% 100%,
        var(--rpoz) 0%
    );
    z-index: 0;
    right: 0px;
    backdrop-filter: blur(5px);
}

.avatar {
    height: 200%;
    z-index: 2;
    --rpoz: 31px;
    clip-path: polygon(
        100% 25%,
        calc(100% - var(--rpoz)) 75%,
        0 75%,
        var(--rpoz) 25%
    );
}

.avatar img {
    height: 100%;
}

.playerId {
    position: absolute;
    height: 80%;
    width: 51%;
    right: 6%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.playerId p {
    font-size: 2rem;
}

.rks {
    width: 18%;
    height: 30%;
    display: flex;
    justify-self: center;
    align-items: center;
    background-color: white;
    clip-path: polygon(100% 0%, 93% 100%, 0 100%, 0% 0%);
    z-index: 1;
    justify-content: center;
    position: absolute;
    left: 22%;
    bottom: 13%;
}

.rks p {
    font-size: 1.3rem;
    color: black;
}

.clgBox {
    width: 4rem;
    height: 1rem;
    left: 27%;
    top: 17%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clgBox p {
    font-size: 1.5rem;
    color: white;
}

.date {
    position: absolute;
    right: -6px;
    top: -20px;
}

.dataBox {
    position: absolute;
    /* width: 91px; */
    height: 25%;
    bottom: -31%;
    left: -1.5%;
    display: flex;
    background-color: rgba(0, 0, 0, 0.5);
    --rpoz: 7.5px;
    clip-path: polygon(
        100% 0%,
        calc(100% - var(--rpoz)) 100%,
        0% 100%,
        var(--rpoz) 0%
    );
    align-items: center;
    justify-content: center;
    padding-right: 0.6rem;
    white-space: nowrap;
}

.dataBox img {
    height: 100%;
    padding: 4px;
    padding-left: 10px;
    box-sizing: border-box;
}

.spInfo {
    position: absolute;
    /* width: 91px; */
    height: 25%;
    bottom: -31%;
    right: 5%;
    display: flex;
    --rpoz: 7.5px;
    clip-path: polygon(
        100% 0%,
        calc(100% - var(--rpoz)) 100%,
        0% 100%,
        var(--rpoz) 0%
    );
    align-items: center;
    justify-content: center;
    padding-right: 0.7rem;
    padding-left: 0.6rem;
    white-space: nowrap;
}

.spInfo p {
    color: black;
    text-shadow: 1px 1px white;
}

.recordInfo {
    position: absolute;
    height: 100%;
    width: 22%;
    right: 12%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    padding-left: 3%;
}

.whiteLine {
    width: 44px;
    height: 100%;
    background-color: white;
    position: absolute;
    left: 0;
}

.recordInfo,
.whiteLine {
    --rpoz: 41px;
    clip-path: polygon(
        100% 0%,
        calc(100% - var(--rpoz)) 100%,
        0% 100%,
        var(--rpoz) 0%
    );
}

:root {
    --row: 3.5%;
    --Poz: 3rem;
}

.sheet {
    height: 100%;
}

.row {
    position: relative;
    height: 25%;
    display: flex;
    align-items: center;
}

.row:nth-child(1) {
    left: calc(var(--row) * 3);
}

.row:nth-child(2) {
    left: calc(var(--row) * 2);
}

.row:nth-child(3) {
    left: calc(var(--row) * 1);
}

.row:nth-child(4) {
    left: 0;
}

.poz {
    width: 0;
    height: 0;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.poz:nth-child(2) {
    left: var(--Poz);
}

.poz:nth-child(3) {
    left: calc(var(--Poz) * 2);
}

.poz:nth-child(4) {
    left: calc(var(--Poz) * 3);
}

.poz:nth-child(5) {
    left: calc(var(--Poz) * 4);
}

.poz p {
    font-size: 1rem;
    color: white;
}

.b19 {
    display: flex;
    z-index: 5;
    flex-wrap: wrap;
}

.b19 .L,
.b19 .M,
.b19 .R {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-right: -1%;
    width: 400px;
}

.b19 .L {
    margin-left: 2%;
}

.b19 .M {
    margin-top: 5%;
}

.b19 .R {
    margin-top: 8%;
}

.Nosignal,
.song,
.over_flow {
    margin-bottom: 2%;
}

.song {
    width: 360px;
    height: 100px;
    /* display: flex; */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-left: 35px;
    margin-right: 0;
    position: relative;
}

.phi_song .info-AT,
.phi_song .info-IN,
.phi_song .info-HD,
.phi_song .info-EZ {
    filter: drop-shadow(0 0 10px #fbff00aa);
}

.b_song .info-AT,
.b_song .info-IN,
.b_song .info-HD,
.b_song .info-EZ,
.over_flow {
    filter: drop-shadow(0 0 10px #ffffffaa);
}

.song .ill-box {
    width: 50%;
    height: auto;
    z-index: 1;
    filter: drop-shadow(2px 4px 10px #00000055);
    position: relative;
}

.num {
    width: 12%;
    height: 16%;
    padding-left: 3.5%;
    padding-right: 4.5%;
    margin-left: -2%;
    top: 4%;
    left: 1%;
    background-color: rgba(255, 255, 255, 1);
    clip-path: polygon(100% 0, 84.844% 100%, 0 100%, 15.156% 0);
    position: absolute;
    text-align: center;
}

.num p {
    font-size: xx-small;
    margin: 0;
    line-height: 130%;
    color: black;
}

.ill {
    width: 100%;
    /* height: 94.92px; */
    clip-path: polygon(100% 0, 81.844% 100%, 0 100%, 18.156% 0);
    overflow: hidden;
}

.ill img {
    width: 100%;
    display: block;
}

.rank-AT,
.rank-IN,
.rank-HD,
.rank-EZ {
    width: 33%;
    height: 33%;
    bottom: 0px;
    position: absolute;
    margin-left: -13%;
    clip-path: polygon(100% 0, 81.844% 100%, 0 100%, 18.156% 0);
}

.rank-AT {
    background-color: rgb(110, 110, 110);
}

.rank-IN {
    background-color: rgb(255, 0, 0);
}

.rank-HD {
    background-color: #00b0f0;
}

.rank-EZ {
    background-color: #92d050;
}

.org,
.rel {
    width: auto;
    text-align: center;
}

.org {
    height: 39%;
    margin-left: 5%;
    margin-top: 0%;
}

.org p {
    font-size: 12px;
}

.rel {
    height: 49%;
    margin-right: 10%;
}

.rel p {
    font-size: 13px;
}

.info-AT,
.info-IN,
.info-HD,
.info-EZ {
    margin-left: -9.1%;
    padding-left: 7%;
    border-right: 3px solid;
    width: 49%;
    height: 90%;
    filter: drop-shadow(2px 4px 10px #00000055);
    backdrop-filter: blur(5px);
    position: absolute;
    right: 4%;
    top: 5%;
}

.info-AT {
    background-color: rgba(240, 0, 0, 0.3);
    border-color: rgb(255, 0, 0);
}

.info-IN,
.info-HD,
.info-EZ {
    background-color: rgba(0, 183, 240, 0.3);
    border-color: rgb(0, 183, 240);
}

.songname {
    width: 95%;
    height: 25%;
    margin-left: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.songname p {
    margin: 0;
    text-align: center;
    font-size: 15px;
}

.songinfo {
    width: 100%;
    height: 70%;
    text-align: center;
    position: relative;
}

.Rating {
    width: 20%;
    height: auto;
    position: absolute;
    top: 15%;
}

.Rating img {
    width: 100%;
    filter: drop-shadow(0px 0px 10px #ffffffbb);
    display: block;
}

.chengji {
    width: 80%;
    height: 100%;
    margin-left: 17%;
}

.score {
    width: 100%;
    height: auto;
}

.score p {
    font-size: x-large;
}

.acc-box {
    width: 100%;
    height: 45%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.acc {
    width: 50%;
    display: inline-block;
}

.acc p {
    font-size: unset;
}

.suggest {
    width: 50%;
    height: 60%;
    /* padding-left: 3px; */
    /* padding-right: 3px; */
    border-radius: 30px;
    /* clip-path: polygon(100% 0, 81.844% 100%, 0 100%, 18.156% 0); */
    overflow: unset;
    display: flex;
    --bkg-color: #ffffff;
    --bkg-color2: #ffffffcc;
    background: radial-gradient(
            20px 20px at 11px 50%,
            var(--bkg-color) 35%,
            transparent 126%
        ),
        radial-gradient(
            40px 40px at 11px 50%,
            #ffffff99 60%,
            transparent 80%
        ),
        radial-gradient(
            50px 50px at 11px 50%,
            var(--bkg-color2) 77%,
            transparent 100%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.9) 100%
        );
    align-items: center;
    justify-content: space-evenly;
}

.suggest-tip {
    width: 5px;
    height: 5px;
    transform: rotate(-45deg);
    border: 2px solid var(--bkg-color);
    filter: drop-shadow(0 0 1px black);
    margin: 3px;
}

.suggest p {
    font-size: 12px;
    color: #000000;
    text-shadow: 0 0 1px #ffffffaa;
}

.suggest-kind-0 {
    --bkg-color: #ff8282;
    --bkg-color2: #ff8282cc;
}

.suggest-kind-1 {
    --bkg-color: #ffb95d;
    --bkg-color2: #ffb95dcc;
}

.suggest-kind-2 {
    --bkg-color: #66ff8f;
    --bkg-color2: #66ff8fcc;
}

.suggest-kind-3 {
    --bkg-color: #6bf7ff;
    --bkg-color2: #6bf7ffcc;
}

.suggest-kind-4 {
    --bkg-color: #f1ff2e;
    --bkg-color2: #f1ff2ecc;
}

.suggest-kind-5 {
    --bkg-color: #f1ff2e;
    --bkg-color2: #f1ff2ecc;
}

.chengji .line {
    width: 100%;
    margin: 0;
    border-bottom: 2px solid;
    border-color: white;
}

.Nosignal {
    width: 330px;
    height: 100px;
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background-color: rgba(112, 112, 112, 0.4);
    margin-left: 3%;
    margin-right: 2.5%;
}

.border_corner {
    z-index: 2500;
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(0, 0, 0, 0);
    border: 3px solid #ffffff;
}

.border_corner_left_top {
    top: 5px;
    left: 5px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 4px;
}

.border_corner_right_top {
    top: 5px;
    right: 5px;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 4px;
}

.border_corner_left_bottom {
    bottom: 5px;
    left: 5px;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 4px;
}

.border_corner_right_bottom {
    bottom: 5px;
    right: 5px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 4px;
}

.Nosignal .border_corner,
.Nosignal .line,
.Nosignal .sqrt {
    /* filter: drop-shadow(0 0 5px #fff); */
}

.Nosignal .timeout,
.Nosignal .client {
    width: 90%;
    margin-top: -1%;
    margin-bottom: -1%;
    z-index: 5;
}

.Nosignal .timeout p {
    /* text-shadow:
        0 0 1px #d8f9ffab,
        1px 0 2px #d8f9ffab,
        -1px 0 2px #d8f9ffab,
        1px 0 5px #d8f9ffab,
        -1px 0 10px #d8f9ffab; */
    margin-left: 5%;
    font-size: x-large;
    color: white;
}

.Nosignal .client p {
    /* text-shadow: 0 0 1px #8eeeff88, 1px 0 2px #8eeeff88, -1px 0 5px #8eeeff88; */
    margin-left: 5%;
    font-size: x-small;
    color: #00b0f0;
}

.Nosignal .line {
    width: 20%;
    margin: 0;
    border-bottom: 5px solid;
    border-color: white;
    margin-left: 5%;
}

.Nosignal .sqrt {
    width: 89%;
    height: 20%;
    border: 3px solid;
    border-color: white;
    margin-left: 5%;
    margin-top: 2%;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: repeating-linear-gradient(
        -45deg,
        #ffffff,
        #ffffff 5px,
        rgb(255 255 255 / 0%) 0,
        rgb(255 255 255 / 0%) 10px
    );
    /* filter: drop-shadow(0px 0px 3px #ffffff); */
}

.Nosignal .sqrt p {
    color: white;
    font-size: 40px;
    filter: blur(3px);
}

.over_flow {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.flow_line_box_l,
.flow_line_box_r {
    display: flex;
    width: 38%;
    justify-content: center;
}

.flow_line {
    background-color: #ffffff;
    height: 15px;
    --rpoz: 5.5px;
    clip-path: polygon(
        100% 0%,
        calc(100% - var(--rpoz)) 100%,
        0% 100%,
        var(--rpoz) 0%
    );
    /* border-radius: 5px; */
    overflow: hidden;
}

.flow_line_box_l .flow_line:nth-child(1),
.flow_line_box_r .flow_line:nth-child(6) {
    width: 50%;
}

.flow_line_box_l .flow_line:nth-child(2),
.flow_line_box_r .flow_line:nth-child(5) {
    width: 25%;
}

.flow_line_box_l .flow_line:nth-child(3),
.flow_line_box_r .flow_line:nth-child(4) {
    width: 12.5%;
}

.flow_line_box_l .flow_line:nth-child(4),
.flow_line_box_r .flow_line:nth-child(3) {
    width: 6.25%;
}

.flow_line_box_l .flow_line:nth-child(5),
.flow_line_box_r .flow_line:nth-child(2) {
    width: 3.125%;
}

.flow_line_box_l .flow_line:nth-child(6),
.flow_line_box_r .flow_line:nth-child(1) {
    width: 1.5625%;
}

.over_flow p {
    font-size: 25px;
    font-family: "Aldrich", "PHI";
}

.createdbox {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-top: 5%;
    margin-bottom: 5%;
    writing-mode: horizontal-tb;
    justify-content: center;
}

.createdbox p {
    color: white;
    font-size: 70px;
    font-family: "Aldrich", "PHI";
}

.phi-plugin {
    display: flex;
    z-index: 1;
    justify-content: center;
    align-items: center;
}

.ver {
    display: flex;
    z-index: 1;
}

.phi-plugin p {
    font-size: xx-large;
    text-shadow: 0 0 20px rgb(0 186 255);
}

.ver p {
    font-size: large;
    text-shadow: 0 0 20px #fff700;
}
